<template>
  <view class="container">
    <!-- 积分展示 -->
    <view class="credit-box">
      <text class="credit-label">当前积分</text>
	  <text class="credit-tip" @tap="showTip = true">如何获取积分？</text>
      <text class="credit-value">{{ userCredit }}</text>
    </view>
	
	
	<view v-if="showTip" class="custom-mask" @tap="showTip = false">
	      <view class="custom-popup" @tap.stop>
	        <view class="popup-header">
	          <text class="popup-title">积分获取方式</text>
	        </view>
	        <scroll-view class="popup-content" scroll-y>
	          <view v-for="(item, index) in tipList" :key="index" class="tip-item">
	            <view >
	              <view class="index-circle">{{ index + 1 }}</view>
	            </view>
	            <text class="tip-text">{{ item }}</text>
	          </view>
	        </scroll-view>
	        <view class="popup-footer">
	          <text class="know-text" @tap="showTip = false">我知道了</text>
	        </view>
	      </view>
	    </view>

	

    <!-- 商品列表 -->
    <view v-if='goodsList.length>0' class="goods-list">
      <view 
        v-for="(item, index) in goodsList" 
        :key="index"
        class="goods-item"
      >
        <image 
          :src="item.image" 
          mode="aspectFill"
          class="goods-image"
        ></image>
        <view class="goods-info">
          <text class="goods-title">{{ item.name }}</text>
          <view class="price-box">
            <text class="credit-icon">{{ item.price }}积分</text>
            <text 
              class="stock"
              :class="{ 'stock-empty': item.stock === 0 }"
            >
              库存: {{ item.stock }}
            </text>
          </view>
          <button 
            class="exchange-btn"
            :class="{ disabled: item.stock === 0 || userCredit < item.price }"
            :disabled="item.stock === 0 || userCredit < item.price"
            @tap="handleExchange(item)"
          >
            {{ getBtnText(item) }}
          </button>
        </view>
      </view>
    </view>
	
	<view v-else class="empty-container">
	  <image class="empty-icon" src="/static/empty.png" mode="aspectFit" />
	  <text class="empty-text">暂无可兑换的商品</text>
	  <text class="empty-tip">所有商品都会在这里显示哦</text>
	</view>
  </view>
</template>

<script setup>
import { ref } from 'vue'

const userCredit = ref(0) // 用户当前积分

const goodsList = ref([
  {
    id: 1,
    name: '品牌保温杯',
    price: 800,
    stock: 0,
    image: 'https://tse4-mm.cn.bing.net/th/id/OIP-C.HdFBmM-QsA7FWr_MzQZO5AHaE8?rs=1&pid=ImgDetMain'
  },
  {
    id: 2,
    name: '无线蓝牙耳机',
    price: 1500,
    stock: 0,
    image: 'https://tse2-mm.cn.bing.net/th/id/OIP-C.RVJZ2Nmvn24ILGPA7vAeTQHaHa?rs=1&pid=ImgDetMain'
  },
  {
    id: 3,
    name: '智能手环',
    price: 1200,
    stock: 0,
    image: 'https://tse3-mm.cn.bing.net/th/id/OIP-C.6aCXGc-gOFpftsPmJLdyKgHaDK?rs=1&pid=ImgDetMain'
  },
])

const getBtnText = (item) => {
  if (item.stock === 0) return '暂无库存'
  if (userCredit.value < item.price) return '积分不足'
  return '立即兑换'
}

const handleExchange = (item) => {
  if (item.stock <= 0 || userCredit.value < item.price) return
  
  uni.showModal({
    title: '确认兑换',
    content: `确定要兑换 ${item.name} 吗？`,
    success: (res) => {
      if (res.confirm) {
        // 这里调用兑换接口
        item.stock--
        userCredit.value -= item.price
        uni.showToast({
          title: '兑换成功',
          icon: 'success'
        })
      }
    }
  })
}

const showTip = ref(false)
const tipList = ref([
  '通过上报审核坑洞，客服通过该审核即可获得积分',
  '通过签到可获取积分'
])
</script>

<style lang="scss" scoped>
	/* 自定义弹窗样式 */
	.credit-tip{
		position: absolute;
		top:50rpx;
		font-size: 26rpx;
		color: limegreen;
		right:40rpx;
	}
	.custom-mask {
	  position: fixed;
	  top: 0;
	  left: 0;
	  right: 0;
	  bottom: 0;
	  background: rgba(0, 0, 0, 0.5);
	  display: flex;
	  justify-content: center;
	  align-items: center;
	  z-index: 999;
	  animation: fadeIn 0.3s ease;
	
	  @keyframes fadeIn {
	    from { opacity: 0; }
	    to { opacity: 1; }
	  }
	}
	
	.custom-popup {
	  width: 80%;
	  max-width: 600rpx;
	  background: #fff;
	  border-radius: 24rpx;
	  overflow: hidden;
	  transform: translateY(0);
	  animation: slideUp 0.3s ease;
	
	  @keyframes slideUp {
	    from { transform: translateY(50px); opacity: 0; }
	    to { transform: translateY(0); opacity: 1; }
	  }
	}
	
	.popup-header {
	  padding: 32rpx;
	  background: #f9f9f9;
	  display: flex;
	  justify-content: space-between;
	  align-items: center;
	  border-bottom: 2rpx solid #eee;
	}
	
	.popup-title {
	  font-size: 34rpx;
	  font-weight: 600;
	  color: #333;
	}
	

	.popup-content {
	  max-height: 60vh;
	  padding: 32rpx;
	}
	
	.tip-item {
	  display: flex;
	  align-items: flex-start;
	  margin-bottom: 32rpx;
	}
	

	
	.index-circle {
	  width: 40rpx;
	  height: 40rpx;
	  border-radius: 50%;
	  background: #07c160;
	  color: #fff;
	  display: flex;
	  align-items: center;
	  justify-content: center;
	  font-size: 24rpx;
	  flex-shrink: 0;

	}
	
	.tip-text {
	  font-size: 28rpx;
	  color: #666;
	  line-height: 1.6;
	  flex: 1;
	}
	
	.popup-footer {
	  padding: 24rpx;
	  border-top: 2rpx solid #eee;
	  text-align: center;
	}
	
	.know-text {
	  color: #07c160;
	  font-size: 30rpx;
	  font-weight: 500;
	  padding: 16rpx 48rpx;
	  border-radius: 48rpx;
	  background: rgba(7, 193, 96, 0.1);
	  display: inline-block;
	}
	.empty-container {
	  height: calc(100vh - 88rpx);
	  display: flex;
	  flex-direction: column;
	  align-items: center;
	  justify-content: center;
	  padding: 60rpx;
	
	  .empty-icon {
	    width: 320rpx;
	    height: 320rpx;
	    margin-bottom: 40rpx;
	    opacity: 0.8;
	  }
	
	  .empty-text {
	    font-size: 32rpx;
	    color: #666;
	    margin-bottom: 16rpx;
	  }
	
	  .empty-tip {
	    font-size: 26rpx;
	    color: #999;
	  }
	}
	
	/* 添加消息列表为空时的过渡动画 */
	.empty-container {
	  animation: fadeIn 0.6s ease;
	
	  @keyframes fadeIn {
	    from {
	      opacity: 0;
	      transform: translateY(20rpx);
	    }
	    to {
	      opacity: 1;
	      transform: translateY(0);
	    }
	  }
	}
.container {
  padding: 20rpx;
  background-color: #f7f7f7;
  min-height: 100vh;
}

.credit-box {
  background: #fff;
  border-radius: 16rpx;
  padding: 30rpx;
  margin: 20rpx;
  text-align: center;
  box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.05);
  
  .credit-label {
    font-size: 28rpx;
    color: #666;
    display: block;
    margin-bottom: 10rpx;
  }
  
  .credit-value {
    font-size: 48rpx;
    color: #07c160;
    font-weight: bold;
  }
}

.goods-list {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  padding: 0 10rpx;
}

.goods-item {
	
  width: 345rpx;
  background: #fff;
  border-radius: 16rpx;
  margin-bottom: 20rpx;
  overflow: hidden;
  box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.05);
}

.goods-image {
  width: 100%;
  height: 320rpx;
}

.goods-info {
  padding: 20rpx;
}

.goods-title {
  font-size: 28rpx;
  color: #333;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
  line-height: 1.4;
}

.price-box {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin: 20rpx 0;
}

.credit-icon {
  color: #07c160;
  font-size: 26rpx;
  font-weight: bold;
}

.stock {
  font-size: 24rpx;
  color: #666;
  
  &-empty {
    color: #eb5757;
  }
}

.exchange-btn {
  background: #07c160;
  color: #fff;
  font-size: 28rpx;
  height: 68rpx;
  line-height: 68rpx;
  border-radius: 34rpx;
  
  &::after {
    border: none;
  }
  
  &.disabled {
    background: #ccc !important;
    color: #fff;
  }
}
</style>